<template>
    <div class="cube">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>

        <slot />
    </div>
</template>

<script>
export default {
    name: "cube",
};
</script>

<style lang="less" scoped>
.cube {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-30deg);
    -o-transform: rotateX(-30deg) rotateY(-30deg);
    -ms-transform: rotateX(-30deg) rotateY(-30deg);
    -moz-transform: rotateX(-30deg) rotateY(-30deg);
    -webkit-transform: rotateX(-30deg) rotateY(-30deg);
    animation: rotate 8s ease-in-out infinite alternate;
    -o-animation: rotate 8s ease-in-out infinite alternate;
    -moz-animation: rotate 8s ease-in-out infinite alternate;
    -webkit-animation: rotate 8s ease-in-out infinite alternate;
    -ms-zoom-animation: rotate 8s ease-in-out infinite alternate;

    div {
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0.9;
        border: 1px #606f7b solid;
        transition: transform 0.2s ease-in;
        -o-transition: transform 0.2s ease-in;
        -moz-transition: transform 0.2s ease-in;
        -webkit-transition: transform 0.2s ease-in;
        background-color: #ebeef5;
        opacity: 0.5;
    }

    .front {
        transform: translateZ(50px);
        -o-transform: translateZ(50px);
        -ms-transform: translateZ(50px);
        -moz-transform: translateZ(50px);
        -webkit-transform: translateZ(50px);
    }

    .back {
        transform: translateZ(-50px);
        -o-transform: translateZ(-50px);
        -ms-transform: translateZ(-50px);
        -moz-transform: translateZ(-50px);
        -webkit-transform: translateZ(-50px);
    }

    .left {
        transform: rotateY(90deg) translateZ(50px);
        -o-transform: rotateY(90deg) translateZ(50px);
        -ms-transform: rotateY(90deg) translateZ(50px);
        -moz-transform: rotateY(90deg) translateZ(50px);
        -webkit-transform: rotateY(90deg) translateZ(50px);
    }

    .right {
        transform: rotateY(90deg) translateZ(-50px);
        -o-transform: rotateY(90deg) translateZ(-50px);
        -ms-transform: rotateY(90deg) translateZ(-50px);
        -moz-transform: rotateY(90deg) translateZ(-50px);
        -webkit-transform: rotateY(90deg) translateZ(-50px);
    }

    .top {
        transform: rotateX(-90deg) translateZ(-50px);
        -o-transform: rotateX(-90deg) translateZ(-50px);
        -ms-transform: rotateX(-90deg) translateZ(-50px);
        -moz-transform: rotateX(-90deg) translateZ(-50px);
        -webkit-transform: rotateX(-90deg) translateZ(-50px);
    }

    .bottom {
        transform: rotateX(-90deg) translateZ(50px);
        -o-transform: rotateX(-90deg) translateZ(50px);
        -ms-transform: rotateX(-90deg) translateZ(50px);
        -moz-transform: rotateX(-90deg) translateZ(50px);
        -webkit-transform: rotateX(-90deg) translateZ(50px);
    }

    @media (max-width: 768px) {
        width: 3rem;
        height: 3rem;

        .front {
            transform: translateZ(1.5rem);
            -o-transform: translateZ(1.5rem);
            -ms-transform: translateZ(1.5rem);
            -moz-transform: translateZ(1.5rem);
            -webkit-transform: translateZ(1.5rem);
        }

        .back {
            transform: translateZ(-1.5rem);
            -o-transform: translateZ(-1.5rem);
            -ms-transform: translateZ(-1.5rem);
            -moz-transform: translateZ(-1.5rem);
            -webkit-transform: translateZ(-1.5rem);
        }

        .left {
            transform: rotateY(90deg) translateZ(1.5rem);
            -o-transform: rotateY(90deg) translateZ(1.5rem);
            -ms-transform: rotateY(90deg) translateZ(1.5rem);
            -moz-transform: rotateY(90deg) translateZ(1.5rem);
            -webkit-transform: rotateY(90deg) translateZ(1.5rem);
        }

        .right {
            transform: rotateY(90deg) translateZ(-1.5rem);
            -o-transform: rotateY(90deg) translateZ(-1.5rem);
            -ms-transform: rotateY(90deg) translateZ(-1.5rem);
            -moz-transform: rotateY(90deg) translateZ(-1.5rem);
            -webkit-transform: rotateY(90deg) translateZ(-1.5rem);
        }

        .top {
            transform: rotateX(-90deg) translateZ(-1.5rem);
            -o-transform: rotateX(-90deg) translateZ(-1.5rem);
            -ms-transform: rotateX(-90deg) translateZ(-1.5rem);
            -moz-transform: rotateX(-90deg) translateZ(-1.5rem);
            -webkit-transform: rotateX(-90deg) translateZ(-1.5rem);
        }

        .bottom {
            transform: rotateX(-90deg) translateZ(1.5rem);
            -o-transform: rotateX(-90deg) translateZ(1.5rem);
            -ms-transform: rotateX(-90deg) translateZ(1.5rem);
            -moz-transform: rotateX(-90deg) translateZ(1.5rem);
            -webkit-transform: rotateX(-90deg) translateZ(1.5rem);
        }
    }

    // &:hover {
    //     .front {
    //         transform: translateZ(100px);
    //     }

    //     .back {
    //         transform: translateZ(-100px);
    //     }

    //     .left {
    //         transform: rotateY(90deg) translateZ(100px);
    //     }

    //     .right {
    //         transform: rotateY(90deg) translateZ(-100px);
    //     }

    //     .top {
    //         transform: rotateX(-90deg) translateZ(-100px);
    //     }

    //     .bottom {
    //         transform: rotateX(-90deg) translateZ(100px);
    //     }
    // }
}

@keyframes rotate {
    16% {
        transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -webkit-transform: rotateY(-90deg);
    }

    33% {
        transform: rotateY(-90deg) rotateZ(135deg);
        -o-transform: rotateY(-90deg) rotateZ(135deg);
        -ms-transform: rotateY(-90deg) rotateZ(135deg);
        -moz-transform: rotateY(-90deg) rotateZ(135deg);
        -webkit-transform: rotateY(-90deg) rotateZ(135deg);
    }

    50% {
        transform: rotateY(225deg) rotateZ(135deg);
        -o-transform: rotateY(225deg) rotateZ(135deg);
        -ms-transform: rotateY(225deg) rotateZ(135deg);
        -moz-transform: rotateY(225deg) rotateZ(135deg);
        -webkit-transform: rotateY(225deg) rotateZ(135deg);
    }

    66% {
        transform: rotateY(135deg) rotateX(135deg);
        -o-transform: rotateY(135deg) rotateX(135deg);
        -ms-transform: rotateY(135deg) rotateX(135deg);
        -moz-transform: rotateY(135deg) rotateX(135deg);
        -webkit-transform: rotateY(135deg) rotateX(135deg);
    }

    100% {
        transform: rotateX(135deg);
        -o-transform: rotateX(135deg);
        -ms-transform: rotateX(135deg);
        -moz-transform: rotateX(135deg);
        -webkit-transform: rotateX(135deg);
    }
}
</style>